<template>
	<view class="nc-bargain-content">
		<view v-if="bargainData.length > 0" class="bargain-list">
			<view class="bargin-item" v-for="(item, index) in bargainData" :key="index">
				<view class="bargin-head">
					<text>发起了砍价</text>
					<text class="head-start-time">{{ item.start_time }}</text>
					<text class="head-operation" v-if="item.status == 1">待分享</text>
					<text class="head-operation" v-else-if="item.status == 2">砍价已结束</text>
					<text class="head-operation" v-else>砍价已取消</text>
				</view>
				<view class="bargin-body">
					<navigator :url="'/promotionpages/bargain/detail/detail?goods_id=' + item.goods_info.goods_id + '&bargain_id=' + item.bargain_id" class="body-pic">
						<image :src="$util.img(item.goods_info.picture.pic_cover_small)" mode="aspectFit"></image>
					</navigator>
					<view class="body-content">
						<navigator :url="'/promotionpages/bargain/detail/detail?goods_id=' + item.goods_info.goods_id + '&bargain_id=' + item.bargain_id" class="body-name">
							{{ item.goods_info.sku_name }}
						</navigator>
						<view class="body-desc">
							<text class="price">{{ item.goods_money }}</text>
							<navigator :url="'/promotionpages/bargain/launch/launch?launch_id=' + item.launch_id" class="operation" v-if="item.status == 1">邀请好友砍价</navigator>
							<navigator :url="'/promotionpages/bargain/launch/launch?launch_id=' + item.launch_id" class="operation" v-if="item.status == 2">查看砍价详情</navigator>
						</view>
					</view>
				</view>
				<view class="bargin-foot">
					还差
					<text class="ns-text-color uni-bold">{{ item.still_bad }}</text>
					元，
					<text v-if="item.activityEnd">砍价已结束</text>
					<view v-else class="count-down">
						剩余
						<uni-count-down
							:day="item.timeMachine.d"
							:hour="item.timeMachine.h"
							:minute="item.timeMachine.i"
							:second="item.timeMachine.s"
							color="#333"
							splitorColor="#333"
							background-color="transparent"
							border-color="transparent"
						/>
					</view>
				</view>
			</view>
			<uni-load-more :status="loadingType" v-if="pageCount > 1"></uni-load-more>
		</view>
		<view v-if="isEmpty && bargainData.length == 0" class="empty">
			<view class="iconfont iconwenzhangchaxun"></view>
			<view>您当前还没有砍价哦</view>
			<button type="primary" @click="goIndex()">去首页逛逛吧</button>
		</view>
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
import uniLoadMore from 'components/uni-load-more/uni-load-more.vue';
import http from 'common/js/http.js';
import uniCountDown from '@/components/uni-count-down/uni-count-down.vue';
import loadingCover from '@/components/loading/loading.vue';
export default {
	components: {
		uniCountDown,
		uniLoadMore,
		loadingCover
	},
	data() {
		return {
			pageIndex: 1,
			pageCount: 0,
			loadingType: 'loading',
			bargainData: [],
			currentTime: 0,
			isEmpty: false,
			ident: false //防止初始化时，触发上拉加载
		};
	},
	async onLoad() {
		await this.getCurrentTime();
		this.getDataList();
	},
	onReachBottom() {
		if (!this.ident) return;
		this.getDataList();
	},
	mixins: [http],
	methods: {
		async getCurrentTime() {
			let res = await this.sendRequest({
				url: 'System.Goods.getCurrentTime',
				async: false
			});
			this.currentTime = res.data / 1000;
		},
		getDataList() {
			this.sendRequest({
				url: 'NsBargain.Bargain.myBargain',
				data: { page_index: this.pageIndex },
				success: res => {
					this.ident = true;
					if (res.code == 0) {
						let list = res.data.list.data;
						this.pageCount = res.data.list.page_count;

						if (this.pageCount == 0) {
							this.loadingType = 'nomore';
							this.isEmpty = true;
						} else {
							if (this.pageIndex < this.pageCount) {
								this.loadingType = 'more';
							} else {
								this.loadingType = 'nomore';
							}
							this.isEmpty = false;

							if (list.length > 0) {
								for (var i = 0; i < list.length; i++) {
									/* 砍价开始时间 */
									list[i].start_time = this.$util.timeStampTurnTime(list[i].start_time);

									/* 砍价金额 */
									list[i].still_bad = (list[i].goods_money - list[i].bargain_money).toFixed(2);
									list[i].activityEnd = false;
									if (list[i].end_time - this.currentTime > 1) {
										list[i].timeMachine = this.$util.countDown(list[i].end_time - this.currentTime);
									} else {
										list[i].activityEnd = true;
									}
								}
								this.bargainData = this.bargainData.concat(list);
								this.pageIndex++;
							}
						}
						if (this.$refs.loadingCover == undefined) return;
						this.$refs.loadingCover.hide();
					}
				}
			});
		},
		//去首页
		goIndex() {
			this.$util.redirectTo('/pages/index/index/index', {}, 'tabbar');
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: $page-color-base;
}
.uni-bold {
	font-weight: bold;
}

.bargain-list {
	margin: 0 30rpx 40rpx;
}
.bargin-item {
	margin-top: 20rpx;
	background-color: #fff;
	border-radius: 10rpx;
	.bargin-head {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;
		height: 88rpx;
		border-bottom: 1px solid $ns-border-color-gray;
		font-size: $ns-font-size-base;
		.head-start-time {
			margin-left: 20rpx;
			margin-right: auto;
			font-size: $ns-font-size-sm;
			color: $ns-text-color-gray;
		}
		.head-operation {
			font-size: $ns-font-size-sm;
			color: $base-color;
		}
	}
	.bargin-body {
		padding: 20rpx 30rpx;
		display: flex;
		align-items: center;
		.body-pic {
			margin-right: 30rpx;
			width: 140rpx;
			height: 140rpx;
			image {
				width: 140rpx;
				height: 140rpx;
				border-radius: 6rpx;
			}
		}
		.body-content {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			width: 460rpx;
			height: 160rpx;
			.body-name {
				font-size: $ns-font-size-base;
				line-height: 1.3;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
			.body-desc {
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
				.price {
					font-size: $ns-font-size-lg;
					font-weight: bold;
					color: $base-color;
				}
				.operation {
					margin: 0;
					min-width: 210rpx;
					height: 70rpx;
					line-height: 70rpx;
					font-size: $ns-font-size-base;
					color: #fff;
					background-color: $base-color;
					border-radius: 10rpx;
					text-align: center;
					box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
				}
			}
		}
	}
	.bargin-foot {
		display: block;
		border-top: 1px solid $ns-border-color-gray;
		padding: 0 30rpx;
		height: 88rpx;
		line-height: 88rpx;
		.count-down {
			display: inline-block;
		}
	}
}
</style>

<style scoped>
.bargin-foot >>> .uni-countdown__number {
	padding: 0 !important;
}
.bargin-foot >>> .uni-countdown__splitor {
	padding: 0 !important;
}
</style>
